<template>
    <div class="shopcar">  

        <van-checkbox-group v-model="result">
            <van-checkbox
                v-for="(item, index) in $store.state.car"
                :key="index"
                :name="item.id"
                :label-disabled="van_checkbox.label_disabled"
                @click='change_select(item.id,item.selected)'
            >
                <van-card
                :num="item.cou"
                :price="item.sell_price"
                desc="描述信息"  
                :title="item.title"
                :thumb="item.thumb_path"
                @click.stop='go_goodsInfo(item.id)'
                @click-thumb.stop='go_goodsInfo(item.id)'
                >
                    <div slot="footer" class="my_stepper" @click.stop='foter'>
                        <a href="#" @click.prevent="del_goods(item.id)">删除该货物</a>
                        <van-stepper v-model="item.cou" @change="update_goods_num(item.id,item.cou)"/>
                    </div>
                </van-card>
            </van-checkbox>
        </van-checkbox-group> 
        <!-- 地步结算栏 -->
        <van-submit-bar
            :price="$store.getters.total_price*100"
            button-text="提交订单"
            @submit="onSubmit"
        >
        <van-checkbox v-model="select_all" @click="select_all_goods(select_all)">全选</van-checkbox>
        </van-submit-bar> 
    </div>
</template>

<script>
export default {
    name:'shopcar',
    data(){
        return{
            result:[],
            van_checkbox:{
                label_disabled:true
            },
            select_all:false,
            acount_price:0
        }
    },
    methods:{
        foter(){/*阻止点击button冒泡！*/},
        // 其实这个页面的思路就是直接从vuex中取值就好了。
        onSubmit(){

        },
        del_goods(id){
            this.$store.commit('del_goods', id);
        },
        go_goodsInfo(id){
            this.$router.push('/home/goodsInfo/'+ id);
            return false;
        },
        change_select(id,selected){
            this.$store.commit('change_select',{id,selected });
            if(selected==true)//传进来是真，那一定是由真变假，这时候无论如何，全选不可能为真！
                this.select_all=false;
            else{//但是要是传进来是假，那就是由假变真，存在可能变成全选，所以要判断下
                var flag=true;
                this.$store.state.car.forEach(item=>{
                    if(item.selected==false)//如果遇见为假的 ，那就意味着变成存在未选中的
                        flag=false;
                })
                this.select_all=flag;
            }
        },
        update_goods_num(id,new_num){
            // 这个函数是用于当更新货物数量的时候
            this.$store.commit('update_goods_num', {id, new_num});
        },
        select_all_goods(select_all){
            //这个函数的作用是点击全选按钮的时候全选所有货物，取消全选的时候取消所有货物选定状态。
            //把所有的id用字符串的形式村存储在result中
           this.result=[];
           if(select_all==false)
                this.$store.state.car.forEach(element => {
                    element.selected=true;
                    this.result.push(element.id);
                });
           else
                this.$store.state.car.forEach(element => {
                    element.selected=false;
                });
        }
       
    },
    computed:{
    },
    created(){
    },
    watch:{
    }
   
}
</script>
<style scoped lang="scss">
.shopcar{
    margin:5px;
    margin-top: 50px;
  
    box-shadow:0 0 3px #999;
    margin-bottom: 50px;
    ::v-deep .van-checkbox__label{
        width: 100% ;;
    }
    ::v-deep .van-stepper__input{
        width:50px;
        height: 28px;
        margin-bottom: 0px;;
    }
    ::v-deep .van-submit-bar{
        margin-bottom: 56px;
    }
    
}
</style>